<template>
    <el-input v-model="input" style="width: 240px" placeholder="请输入要查询的事件类型" @change="search" /><el-icon><Search /></el-icon>
    <Teleport to="body">
      <div class="modal" v-if="openPan">
        <SearchedData @closeTable="closeTable()" />
        <div class="mask" @click="openPan=false"></div>
      </div>
    </Teleport>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import {ref ,getCurrentInstance,onMounted} from "vue";

import { Query } from "@/zondyTools/mapgis-api/Query";
import SearchedData from "./component/SearchedData.vue";
import location from "@/assets/img/location.png";

import { useSearchedAccidentsStore } from "@/stores/serachedAccidents";
const {addAccidentSearch,resetData} = useSearchedAccidentsStore();
const {proxy} = getCurrentInstance();
let $map=ref(null)
let input=ref("")

let openPan=ref(false)

/* 标注图层 */
const localIcon = new ol.style.Icon({
  anchor: [0.7, 0],
  anchorOrigin: "bottom-left",
  anchorXUnits: "fraction",
  anchorYUnits: "pixels",
  //offsetOrigin: "bottom-left",
  offset:[-10,-10],
  //图标缩放比例
  scale: 0.1,
  //透明度
  opacity: 0.75,
  //图标的url
  src: location,
});
localIcon.load();
const searchSource = new ol.source.Vector();
const searchLayer = new ol.layer.Vector({
  source: searchSource,
  id: 'search-label-layer',
  style:new ol.style.Style({
    image: localIcon,
  })
});

onMounted(()=>{
    $map.value=proxy.$map
    $map.value.addLayer(searchLayer)
    
})

const search=async ()=>{
        const service={
            name: "guanggu",
            layerId: 2,
        }
        //console.log("input.value",input.value)
        /* 地图文档查询回调函数 */
        const success=async (res)=>{
            //console.log("res",res)
            // 清空画布和标注
            searchSource.clear()

            // 处理查询结果
            res.forEach(item=>{
                //将结果转换为openlayers的feature,并添加到labelSource中
                const feature=new ol.Feature({
                    geometry:new ol.geom.Point(item.getGeometry().flatCoordinates)
                })
                
                feature.setProperties(item.values_.values_)
                searchSource.addFeature(feature)

                /* 将查询结果同步商店 */
                addAccidentSearch({coord:item.getGeometry().flatCoordinates,attr:item.values_.values_})
            })

        }
        /* 用事件类型的属性值进行地图文档查询 */
        const where={
            key:"事件类型",
            value:input.value
        }
        Query.queryByAttr({
            service,
            where,
            success
        })
        /* 打开查询结果弹窗 */
        openPan.value=true
    
}

const closeTable=()=>{
    
    openPan.value=false
    resetData()
    /* 清除标注图层 */
    searchSource.clear()

    /* 重置输入框 */
    input.value=""
}

</script>
<style scoped>
.modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 1000;
}
</style>